<template>
  <div id="app">
    <!--应用程序栏-->
    <v-app-bar app color="#FF5252">
      <v-list-item-title style="text-align: center;font-size:18px;color:white"
        >确认订单</v-list-item-title
      ><v-btn
        elevation="0"
        small
        color="#FF5252"
        router-link
        :to="{ path: '/goods' }"
        class="go_back"
        ><icon name="back" scale="2" color="white"></icon
      ></v-btn>
    </v-app-bar>
    <!--收货人信息-->
    <v-card style="margin: 15px;">
      <v-list-item>
        <v-list-item-avatar size="30" tile>
          <icon name="mine" scale="3" style="color: gray"></icon>
        </v-list-item-avatar>
        <v-list-item-content style="">
          <v-col
            style="text-align:left;padding:0;max-width: 50px;font-size: 15px"
          >
            {{ user.name }}
          </v-col>
          <v-col style="font-size: 13px;color: gray">{{ user.phone }}</v-col>
          <v-list-item-content style="font-size:12px;padding: 0">
            {{ user.address }}</v-list-item-content
          >
        </v-list-item-content>
      </v-list-item>
    </v-card>
    <!--购买商品的信息-->
    <v-card style="margin: 15px;">
      <v-list-item>
        <v-list-item-avatar size="50" color="grey"></v-list-item-avatar>
        <v-list-item-content>
          <v-list-item> {{ goods.commodityName }}</v-list-item>
          <v-list-item>
            {{ goods.price }}
          </v-list-item></v-list-item-content
        >
      </v-list-item>
    </v-card>
    <v-bottom-navigation app>
      <div>
        <v-text style="vertical-align:middle;"
          >合计: ¥ {{ goods.price }}</v-text
        >
        <v-btn min-height="50px" @click="submit(1)">提交订单</v-btn>
      </div>
    </v-bottom-navigation>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Account",
  data() {
    return {
      user: [],
      goods: []
    };
  },
  created() {
    this.getInformation();
    this.getGoods();
  },
  methods: {
    //  提交订单
    submit(state) {
      if (state) {
        this.$router.replace({
          path: "/successOrder"
        });
      } else {
        this.$router.replace({
          path: "/failOrder"
        });
      }
    },
    //  从本地获取用户信息
    getInformation() {
      this.user = JSON.parse(localStorage.getItem("user"));
    },
    //  后端获取商品信息
    getGoods() {
      let _this = this;
      this.goods_id = localStorage.getItem("data");
      axios
        .get("/api/shoppingMall/getCommodityInfo", {
          params: { commodityId: this.goods_id }
        })
        .then(function(response) {
          console.log(response);
          _this.goods = response.data.data[0];
          console.log(_this.goods);
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>

<style scoped>
.v-bottom-navigation.v-item-group.theme--light.v-bottom-navigation--fixed {
  height: inherit !important;
}

</style>
